<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<!-- serch -->
		<div class="search">
			<div class="searchBot f f-a-c f-j-b">
				<div class="inpBox f f-a-c">
					<input type="text" class="inp" v-model="search" placeholder="Search.." name="" id="" />
					<div @click="goSearch" class="scheBtn f f-a-c f-j-c hand"><img src="/src/assets/sche.png" class="scheImg" alt="" /></div>
				</div>
				<div class="rigTab f f-a-c">
					<div class="rigTitle">Popular:</div>
					<div class="tabsTit hand" @click="fuSearch(item.value)" v-for="(item, index) in port.setting" :key="index">{{ item.value }}</div>
				</div>
			</div>
		</div>
		<!-- tabs -->
		<div class="waiTabs">
			<div class="tabs f f-a-c f-j-b m-0-a">
				<div class="leftTabs">
					<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
						<div v-for="(item, index) in port.tabsList" :key="index">
							<el-tab-pane :label="item.label" :name="index"></el-tab-pane>
						</div>
						<!-- <el-tab-pane label="IT" name="first"></el-tab-pane>
						<el-tab-pane label="Finance&investment" name="Finance"></el-tab-pane>
						<el-tab-pane label="Business" name="Business"></el-tab-pane>
						<el-tab-pane label="Legal" name="Legal"></el-tab-pane>
						<el-tab-pane label="Career development" name="Career"></el-tab-pane>
						<el-tab-pane label="Industrial insights" name="Industrial"></el-tab-pane>
						<el-tab-pane label="Life service" name="Life"></el-tab-pane>
						<el-tab-pane label="Art&design" name="design"></el-tab-pane> -->
					</el-tabs>
				</div>
				<div @mouseenter="showDrawer(1)" class="rigTu"><img src="/src/assets/serch/move.png" class="moveImg hand" alt="" /></div>
			</div>
			<!-- 弹出层 -->
			<div v-show="drawerShow" @click="removePop" class="mask">
				<div @click.stop="showDrawer(2)" class="maskBox animate-fadeInDown">
					<div class="maskBoxShow f f-a-c f-w-w">
						<div v-for="(ite, inde) in port.popoList" @click.stop="sectList(ite, inde)" :key="inde" class="maskItem hand">{{ ite.label }}</div>
					</div>
				</div>
			</div>
		</div>
		<!--下面的下拉 -->
		<div class="Screening f f-a-c">
			<div class="screeningItem">
				<el-dropdown max-height="200" trigger="click">
					<span class="el-dropdown-link hand"> {{ cond.topics || "Topic" }} <img src="/src/assets/serch/Frame_1@2x.png" class="Frame_1" alt="" /> </span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item v-for="(item, index) in port.topicsList" @click="qieTopics(item)" :key="index">{{ item.name }}</el-dropdown-item>
							<!-- <el-dropdown-item>All</el-dropdown-item>
							<el-dropdown-item> Adventure game design </el-dropdown-item>
							<el-dropdown-item>Advertising</el-dropdown-item>
							<el-dropdown-item>Advertisement design</el-dropdown-item>
							<el-dropdown-item>Amazon advertising</el-dropdown-item>
							<el-dropdown-item>Display advertising</el-dropdown-item>
							<el-dropdown-item>Action 5</el-dropdown-item>
							<el-dropdown-item>Action 5</el-dropdown-item>
							<el-dropdown-item>Action 5</el-dropdown-item>
							<el-dropdown-item>Action 5</el-dropdown-item>
							<el-dropdown-item>Action 5</el-dropdown-item>
							<el-dropdown-item>Action 5</el-dropdown-item>
							<el-dropdown-item>Action 5</el-dropdown-item> -->
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
			<div class="screeningItem">
				<el-dropdown max-height="200" trigger="click">
					<span class="el-dropdown-link hand"> {{ addressNmae }} <img src="/src/assets/serch/Frame_1@2x.png" class="Frame_1" alt="" /> </span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item v-for="(item, index) in port.addressList" @click="qieAddress(item)" :key="index">{{ item.name }}</el-dropdown-item>
							<!-- <el-dropdown-item>All</el-dropdown-item>
							<el-dropdown-item> Adventure game design </el-dropdown-item>
							<el-dropdown-item>Advertising</el-dropdown-item>
							<el-dropdown-item>Advertisement design</el-dropdown-item>
							<el-dropdown-item>Amazon advertising</el-dropdown-item>
							<el-dropdown-item>Display advertising</el-dropdown-item>
							<el-dropdown-item>Action 5</el-dropdown-item>
							<el-dropdown-item>Action 5</el-dropdown-item>
							<el-dropdown-item>Action 5</el-dropdown-item>
							<el-dropdown-item>Action 5</el-dropdown-item>
							<el-dropdown-item>Action 5</el-dropdown-item>
							<el-dropdown-item>Action 5</el-dropdown-item>
							<el-dropdown-item>Action 5</el-dropdown-item> -->
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
			<div class="screeningItem">
				<el-dropdown max-height="200" trigger="click">
					<span class="el-dropdown-link hand"> {{ cond.language || "Language" }} <img src="/src/assets/serch/Frame_1@2x.png" class="Frame_1" alt="" /> </span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item v-for="(item, index) in port.language" @click="qieLanguage(item)" :key="index">{{ item.value }}</el-dropdown-item>
							<!-- <el-dropdown-item>All</el-dropdown-item>
							<el-dropdown-item> Adventure game design </el-dropdown-item>
							<el-dropdown-item>Advertising</el-dropdown-item>
							<el-dropdown-item>Advertisement design</el-dropdown-item>
							<el-dropdown-item>Amazon advertising</el-dropdown-item>
							<el-dropdown-item>Display advertising</el-dropdown-item>
							<el-dropdown-item>Action 5</el-dropdown-item>
							<el-dropdown-item>Action 5</el-dropdown-item>
							<el-dropdown-item>Action 5</el-dropdown-item>
							<el-dropdown-item>Action 5</el-dropdown-item>
							<el-dropdown-item>Action 5</el-dropdown-item>
							<el-dropdown-item>Action 5</el-dropdown-item>
							<el-dropdown-item>Action 5</el-dropdown-item> -->
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
		</div>
		<!-- 47 experts found -->
		<div class="found">
			<div class="foundTop f f-a-c f-j-b">
				<div class="foundLrft">{{ port.foundList.length || 0 }} experts found</div>
				<div class="foundRig f f-a-c">
					<div class="sort">Sort by</div>
					<el-dropdown max-height="200" trigger="click">
						<span class="el-dropdown-link hand">
							{{ Price }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item @click="dropdowns('lowPrice', 'Price')">Price: low - high</el-dropdown-item>
								<el-dropdown-item @click="dropdowns('highPrice', 'Price')"> Price: high - low </el-dropdown-item>
								<el-dropdown-item @click="dropdowns('level', 'Rating')">Rating</el-dropdown-item>
								<el-dropdown-item @click="dropdowns('lastLogin', 'Recent active')">Recent active</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>
			</div>
			<!-- /下面的列表 -->
			<div class="f f-a-c f-w-w">
				<div v-for="(item, index) in port.foundList" :key="index" @click="goUserInfo(item)" class="financialItem hand f-s">
					<div class="topAvatr">
						<div class="topSckr f f-a-c">
							<img src="/src/assets/Star.png" class="Star" alt="" />
							<div class="strNum">{{ item.level }}/5</div>
						</div>
						<div class="avatr f f-a-c">
							<div class="leftAva"><img :src="item.avatar || ''" class="avater" alt="" /></div>
							<div class="address">
								<div class="name">{{ item.firstName }}{{ item.lastName }}</div>
								<div class="cof">{{ item.position }}</div>
								<div class="addre f f-a-c f-j-c"><img src="/src/assets/address.png" class="imgAva" alt="" />{{ item.areaName || "--" }}</div>
							</div>
						</div>
						<!-- 下方的 -->
						<div class="topice f f-a-c f-j-c f-w-w">
							<div class="topTit m-b-10">Topics:</div>
							<div v-for="(ite, ind) in item.topicNames" :key="ind" class="m-b-10 topiceBox">{{ ite }}</div>

							<!-- <div class="topiceBox">M&A</div>
							<div class="topiceBox">Rental</div>
							<div class="topiceBox">Cooperate law</div> -->
						</div>
					</div>
					<!-- count -->
					<div class="count">{{ item.myDescribe }}</div>
					<div style="width: 120px; height: 40px" class="btn">
						<ButtonDiffuse :name="'From $' + item.lowPrice" />
					</div>
				</div>
			</div>
			<div @click="moreList" v-if="total > port.foundList.length" class="more boxShow hand">More</div>
		</div>
		<!-- Results on KnowClub -->
		<div class="knowClub">
			<div class="knowClubTit">Results on KnowClub</div>
			<div class="knowClubBot f f-a-c f-w-w">
				<div v-for="(item, index) in port.kcJoinList" :key="index" class="knowClubItem">
					<div class="knowImgBox"><img :src="item.clubImage" alt="" /></div>
					<div class="count f f-a-c f-j-b">
						<div class="f f-a-c">
							<img :src="item.avatar" class="avart" alt="" />
							<div class="name">
								<div class="budgt o-f-1">{{ item.clubName }}</div>
								<div class="budgid f f-a-c">
									{{ item.userName }}
									<div class="span">{{ item.fansNum }} fans</div>
								</div>
							</div>
						</div>
						<!-- <div class="btn">Join</div> -->
						<div :class="{ btns: item.subscriptionId != null && item.subscriptionId > 0 }" @click.stop="joinIn(item)" class="btn">
							{{ item.subscriptionId != null && item.subscriptionId > 0 ? "Joined" : "Join" }}
						</div>
					</div>
				</div>
			</div>
			<div v-if="port.kcJoinList.length < kcTotal" @click="moerListKc" class="more boxShow hand">More</div>
		</div>
		<!-- KnowClub  contents -->
		<div class="contents">
			<div class="topTit">KnowClub contents</div>
			<div class="contentsItem f f-a-c f-w-w">
				<div v-for="(item, index) in port.kcArticList" :key="index" class="item f f-a-c f-j-b">
					<div class="leftImg"><img :src="item.image" alt="" /></div>
					<div class="rigCount">
						<div class="topTitle">{{ item.clubName }}</div>
						<div class="topCount">{{ item.title }}</div>
						<div class="topCounts">
							{{ item.content }}
						</div>
						<div class="botBtn f f-a-c f-j-b">
							<div class="time">{{ dayjs(item.publishTime).format("DD/MM/YYYY") }}</div>
							<div class="movery">More</div>
						</div>
					</div>
				</div>
			</div>
			<div @click="moerArticListKc" v-if="port.kcArticList.length < kcArticTotal" class="more boxShow hand">More</div>
		</div>
		<!-- 底部tabbar -->
		<Join ref="join" />
		<OutClub @refresh="refresh" ref="outClub" />
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ElMessage, dayjs } from "element-plus";
	import OutClub from "@/components/OutClub/index.vue";
	import Join from "@/components/join/index.vue";
	import { ClassificationTree, TopicsList, SettingList, AdddressList } from "@/api/commonality.js";
	import { KcNownClub, KcArticleList } from "@/api/knowClub/index.js";
	import { SearchProt } from "@/api/xpert.js";
	import { ArrowDown, Check, CircleCheck, CirclePlus, CirclePlusFilled, Plus } from "@element-plus/icons-vue";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import { useRoute } from "vue-router";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	import { ref, onMounted, reactive } from "vue";
	let activeName = ref(0);
	const route = useRoute();
	const topics = ref("");
	const addressNmae = ref("Location");
	let tabInd = ref(0);
	let pageKc = ref(1);
	let search = ref("");
	let total = ref(0);
	let kcTotal = ref(0);
	let kcArticTotal = ref(0);
	let outClub = ref("");
	let join = ref("");
	let kcArtic = ref(1);
	let Price = ref("Price");
	let statusTab = ref(1);
	let pageNum = ref(1);
	let drawerShow = ref(false);
	let port = reactive({
		tabsList: [],
		popoList: [],
		topicsList: [],
		setting: [],
		addressList: [],
		language: [],
		foundList: [],
		kcJoinList: [],
		kcArticList: []
	});
	let cond = reactive({
		price: "lowPrice",
		language: "",
		topics: "",
		areaCode: "",
		industry: ""
	});
	onMounted(async () => {
		kcLisy();
		kcArticleLisy();
		search.value = route.query.name;
		topics.value = "";
		// 获取地址列表
		address();
		// 获取配置列表
		settingList();
		topicsList();
		// 获取分类
		handleClose();
		await handleSearch();
		window.addEventListener("scroll", handleScroll);
	});
	// 去个人中心
	const goUserInfo = item => {
		router.push({
			path: "/PersonalHome",
			query: {
				userId: item.userId
			}
		});
	};
	// 刷新
	const refresh = async () => {
		console.log("1111111111111111111111111");
		kcLisy();
	};

	// /点击加入俱乐部
	const joinIn = item => {
		if (item.subscriptionId != null && item.subscriptionId > 0) {
			outClub.value.id = item.subscriptionStripeId;
			outClub.value.upLoadVisible = true;
			// 代表已经加入俱乐部
		} else {
			// 代表未加入俱乐部
			join.value.obj = item;
			join.value.money = item.subscription;
			join.value.upLoadVisible = true;
		}
	};
	// 调用knownClub文章列表
	const kcArticleLisy = async () => {
		let n = await KcArticleList({
			pageNum: kcArtic.value,
			pageSize: 4
		});
		kcArticTotal.value = n.data.total;
		port.kcArticList = [...port.kcArticList, ...n.data.list];
	};
	// 点击下一页
	const moerArticListKc = () => {
		kcArtic.value++;
		console.log(kcArtic.value, "7878787");
		kcArticleLisy();
	};
	// 调用knownClub俱乐部列表
	const kcLisy = async () => {
		let n = await KcNownClub({
			pageNum: pageKc.value,
			pageSize: 4
		});
		kcTotal.value = n.data.total;
		port.kcJoinList = [...port.kcJoinList, ...n.data.list];
	};
	// 点击下一页
	const moerListKc = () => {
		pageKc.value++;
		kcLisy();
	};
	// 搜索接口
	const handleSearch = async () => {
		let obj = {
			keyword: search.value,
			topicId: topics.value || "",
			language: cond.language || "",
			areaCode: cond.areaCode || "",
			industry: cond.industry || "",
			sortByColumns: cond.price == "highPrice" ? "lowPrice" : cond.price,
			sortByColumnsSort: cond.price == "lowPrice" ? "ASC" : "DESC",
			pageNum: pageNum.value
		};
		// console.log(obj, "45454544");
		// return;
		let n = await SearchProt(obj);
		total.value = n.data.total;
		port.foundList = [...port.foundList, ...n.data.list];
	};
	// 点击更多
	const moreList = () => {
		pageNum.value++;
		handleSearch();
	};
	// 切换地址topics
	const qieAddress = item => {
		cond.areaCode = item.code;
		addressNmae.value = item.name;
		pageNum.value = 1;
		port.foundList = [];
		handleSearch();
	};
	// 切换语言
	const qieLanguage = item => {
		cond.language = item.value;
		pageNum.value = 1;
		port.foundList = [];
		handleSearch();
	};
	// 切换tabs
	const qieTopics = item => {
		topics.value = item.id;
		cond.topics = item.name;
		pageNum.value = 1;
		port.foundList = [];
		handleSearch();
	};
	const goSearch = () => {
		port.foundList = [];
		pageNum.value = 1;
		handleSearch();
	};
	// 获取topics
	const topicsList = async () => {
		let n = await TopicsList();
		port.topicsList = n.data;
	};

	// 获取基础配置列表
	const settingList = async () => {
		let n = await SettingList({ title: "xp_popular" });
		port.setting = n.data;
		// 获取语言配置
		let m = await SettingList({ title: "language" });
		port.language = m.data;
	};
	// 获取地区列表
	const address = async () => {
		let n = await AdddressList();
		port.addressList = n.data;
	};
	// 点击推荐
	const fuSearch = count => {
		search.value = count;
	};

	const handleClose = async done => {
		let n = await ClassificationTree();
		port.tabsList = n.data;
	};
	const showDrawer = num => {
		port.popoList = port.tabsList;
		drawerShow.value = !drawerShow.value;
	};
	// 点击筛选
	const dropdowns = (e, s) => {
		// console.log(e, "0000000");
		cond.price = e;
		Price.value = s;
		pageNum.value = 1;
		port.foundList = [];
		handleSearch();
	};
	// 切换tabs
	const sectList = (item, index) => {
		cond.industry = item.id;
		drawerShow.value = false;
		if (item.level == 1) {
			activeName.value = index;
		}
		pageNum.value = 1;
		port.foundList = [];
		handleSearch();
	};
	// tabs
	const handleClick = (tab, e) => {
		cond.industry = port.tabsList[tab.index].id;
		console.log(tab.index, e, "123456");
		tabInd.value = tab.index;
		port.popoList = port.tabsList[tabInd.value].children;
		// id存起来
		cond.industry = port.tabsList[tabInd.value].id;
		drawerShow.value = true;
		pageNum.value = 1;
		port.foundList = [];
		// 请求
		handleSearch();
	};
	// 当移除时
	const removePop = () => {
		drawerShow.value = false;
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style lang="scss" scoped>
	// display: -webkit-box; /* 使用弹性盒子布局 */
	// 	-webkit-box-orient: vertical; /* 垂直排列子元素 */
	// 	overflow: hidden; /* 隐藏溢出的内容 */
	// 	-webkit-line-clamp: 3; /* 显示的行数 */
	// 	-webkit-box-orient: vertical; /* 垂直排列子元素 */
	// 	text-overflow: ellipsis; /* 显示省略号 */
	@function px($px) {
		@return calc($px / 1.5) * 1px;
	}
	::v-deep .el-tabs__header {
		margin: 0 !important;
	}

	::v-deep .el-tabs__nav-wrap::after {
		height: 0 !important;
	}

	::v-deep .el-tabs__item:hover {
		color: #000;
	}

	::v-deep .el-tabs__item.is-active {
		color: #000;
	}

	::v-deep .el-tabs__item {
		padding: 0 px(58);

		&:last-child {
			padding-right: 0;
		}
	}

	::v-deep .el-tabs__active-bar {
		background-color: #000 !important;
	}

	::v-deep .el-tabs {
		--el-tabs-header-height: 52px !important;
	}

	::v-deep .el-tabs__nav-next,
	.el-tabs__nav-prev {
		margin-top: 4px !important;
	}

	::v-deep .el-dropdown-menu__item:not(.is-disabled):focus {
		color: #000;
		background-color: #f7f7f9;
	}

	::v-deep .el-pager li:hover {
		color: #000000 !important;
	}

	::v-deep .el-pager li.is-active {
		color: #000000 !important;
	}

	::v-deep .el-pagination button:hover {
		color: #000000 !important;
	}

	::v-deep .el-pager li {
		font-size: px(24) !important;
		margin: 0 px(10);
	}

	::v-deep .el-pagination .btn-next .el-icon {
		font-size: px(28) !important;
	}

	::v-deep .el-pagination .btn-prev .el-icon {
		font-size: px(28) !important;
	}

	.waiTabs {
		position: relative;
		border-bottom: px(1.3) solid #dddee1;
		margin-bottom: px(64);
	}

	.Screening {
		width: 1280px;
		margin: 0 auto;
		margin-bottom: px(60);

		.el-dropdown-link {
			font-size: px(21);
			display: flex;
			align-items: center;
			padding: px(10) px(16);
			background: #ffffff;
			color: #02102e;
			margin-left: px(20);
			border-radius: 10.67px;
			border: px(1.3) solid #f1f2f4;
			box-shadow: px(5.3) px(5.3) px(16) 0px rgba(2, 16, 46, 0.08);
		}

		.Frame_1 {
			width: px(21);
			height: px(21);
			margin-left: px(10);
		}
	}
	.contents {
		margin: 0 auto;
		width: 1280px;
		margin-top: px(80);
		margin-bottom: px(100);
		.topTit {
			font-size: px(37);
			font-family: Manrope, Manrope-700;
			font-weight: 700;
			text-align: LEFT;
			color: #02102e;
			margin-bottom: px(53);
		}
		.contentsItem {
			width: 100%;
			margin-bottom: px(60);
			.item {
				width: 49%;
				margin-right: 2%;
				height: px(304);
				background: #ffffff;
				border: px(1.3) solid #dddee1;
				border-radius: px(21);
				margin-bottom: px(40);
				padding: px(32);
				&:nth-child(2n) {
					margin-right: 0;
				}
				.rigCount {
					width: 296px;
					.topTitle {
						font-size: px(26);
						font-family: Manrope, Manrope-600;
						font-weight: 600;
						text-align: LEFT;
						color: #02102e;
						margin-bottom: px(20);
					}
					.topCount {
						font-size: px(21);
						font-family: Manrope, Manrope-500;
						font-weight: 500;
						text-align: LEFT;
						color: #02102e;
						margin-bottom: px(10);
					}
					.topCounts {
						font-size: px(18);
						font-family: Manrope, Manrope-400;
						font-weight: 400;
						text-align: LEFT;
						color: #02102e;
						margin-bottom: px(25);
						display: -webkit-box; /* 使用弹性盒子布局 */
						-webkit-box-orient: vertical; /* 垂直排列子元素 */
						overflow: hidden; /* 隐藏溢出的内容 */
						-webkit-line-clamp: 2; /* 显示的行数 */
						-webkit-box-orient: vertical; /* 垂直排列子元素 */
						text-overflow: ellipsis; /* 显示省略号 */
					}
					.botBtn {
						.movery {
							font-size: px(16);
							font-family: Manrope, Manrope-400;
							font-weight: 400;
							text-align: LEFT;
							color: #8590a1;
						}
						.time {
							font-size: px(16);
							font-family: Manrope, Manrope-400;
							font-weight: 400;
							text-align: LEFT;
							color: #8590a1;
						}
					}
				}
				.leftImg {
					width: 240px;
					height: px(240);
					border-radius: px(10);
					overflow: hidden;
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	.mask {
		position: absolute;
		background-color: rgba(0, 0, 0, 0.5);
		height: 150vh;
		z-index: 9;
		overflow: hidden;
		width: 100%;

		.maskBox {
			position: absolute;
			background-color: #fff;
			z-index: 10;
			width: 100%;

			.maskBoxShow {
				width: 1280px;
				margin: 0 auto;
				margin-top: px(25);
				padding-bottom: px(10);

				.maskBoxShow {
					width: 100%;
				}
			}

			.maskItem {
				width: 20%;
				font-size: px(18);
				font-family: Manrope, Manrope-400;
				font-weight: 400;
				text-align: LEFT;
				color: #5b6477;
				margin-bottom: px(20);
			}
		}
	}
	.animate-fadeInDown {
		animation: fadeInDown 0.5s;
	}

	.tabs {
		width: 1280px;

		.rigTu {
			width: px(32);
			height: px(32);

			img {
				width: 100%;
				height: 100%;
			}
		}

		.leftTabs {
			width: 95%;

			.demo-tabs {
				height: 100%;
				height: 52px !important;
			}
		}
	}

	.knowClub {
		margin: 0 auto;
		width: 1280px;
		margin-top: px(80);
		.knowClubBot {
			margin-top: px(53);
			.knowClubItem {
				width: 23%;
				margin-right: 2.6%;
				margin-bottom: px(100);
				&:nth-child(4n) {
					margin-right: 0;
				}
				.count {
					margin-top: px(30);
					.btn {
						padding: px(8) px(10);
						background: #02102e;
						font-size: px(18);
						font-family: Manrope, Manrope-700;
						font-weight: 700;
						text-align: LEFT;
						color: #ffffff;
						border-radius: px(10);
					}
					.avart {
						width: px(64);
						height: px(64);
						border-radius: px(32);
					}
					.name {
						text-align: left;
						margin-left: px(15);
						.budgid {
							font-size: px(16);
							font-family: Manrope, Manrope-400;
							font-weight: 400;
							text-align: LEFT;
							color: #02102e;
							margin-top: px(5);
							.span {
								font-size: px(13);
								font-family: Manrope, Manrope-400;
								font-weight: 400;
								text-align: LEFT;
								color: #8590a1;
								margin-left: px(10);
								margin-top: px(5);
							}
						}
						.budgt {
							width: px(230);
							font-size: px(18);
							font-family: Manrope, Manrope-500;
							font-weight: 500;
							text-align: LEFT;
							color: #02102e;
						}
					}
				}
				.knowImgBox {
					width: 100%;
					height: px(300);
					border-radius: px(10.5);
					overflow: hidden;
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.knowClubTit {
			font-size: px(37);
			font-family: Manrope, Manrope-700;
			font-weight: 700;
			text-align: LEFT;
			color: #02102e;
		}
	}
	.financialItem {
		margin-bottom: px(80);
		width: 23%;
		height: px(590);
		flex-wrap: nowrap;
		box-sizing: border-box;
		// overflow: hidden;
		margin-right: 2.6%;

		.topAvatr {
			width: 100%;
			height: px(330);
			background-color: #f7f7f9;
			padding: px(14) px(16);
			border-radius: px(21);
			box-sizing: border-box;
			.Star {
				width: px(24);
				height: px(21);
				margin-right: px(8);
				box-sizing: border-box;
			}
			.strNum {
				font-size: px(16);
				font-family: Manrope, Manrope-500;
				font-weight: 500;
				text-align: LEFT;
				color: #8590a1;
				box-sizing: border-box;
			}
		}
		.avatr {
			margin-top: px(34);
			justify-content: space-evenly;
			box-sizing: border-box;
			.leftAva {
				width: px(157);
				height: px(157);
				border-radius: 50%;
				box-sizing: border-box;
				.avater {
					width: px(157);
					height: px(157);
					border-radius: 50%;
					overflow: hidden;
					box-sizing: border-box;
					object-fit: cover;
				}
			}
			.address {
				box-sizing: border-box;
				.name {
					font-size: px(21);
					font-family: Manrope, Manrope-800;
					font-weight: 800;
					text-align: center;
					color: #02102e;
					box-sizing: border-box;
				}
				.cof {
					font-size: px(21);
					font-family: Manrope, Manrope-500;
					font-weight: 500;
					text-align: center;
					box-sizing: border-box;
					color: #02102e;
					margin: px(13) 0;
				}
				.addre {
					font-size: px(21);
					font-family: Manrope, Manrope-500;
					font-weight: 500;
					text-align: center;
					color: #02102e;
					box-sizing: border-box;
					.imgAva {
						width: px(16);
						height: px(18.6);
						margin-right: px(6.6);
						box-sizing: border-box;
					}
				}
			}
		}
		.topice {
			box-sizing: border-box;
			margin-top: px(10);
			height: 60px;
			overflow: hidden;
			.topTit {
				font-size: px(21);
				font-family: Manrope, Manrope-400;
				font-weight: 400;
				text-align: LEFT;
				color: #02102e;
				margin-right: px(5);
				box-sizing: border-box;
			}
			.topiceBox {
				border: px(1.8) solid #c1c5cb;
				box-sizing: border-box;
				border-radius: px(10);
				padding: px(5) px(8);
				font-size: px(18);
				font-family: Manrope, Manrope-400;
				font-weight: 400;
				text-decoration: underline;
				text-align: LEFT;
				color: #02102e;
				text-decoration: underline;
				margin-right: px(5);
				&:last-child {
					margin-right: 0;
				}
			}
		}
		.count {
			height: 55px;
			box-sizing: border-box;
			margin: px(35) 0;
			padding: 0 px(20);
			font-size: px(24);
			font-family: Manrope, Manrope-400;
			font-weight: 400;
			text-align: LEFT;
			color: #02102e;
			display: -webkit-box; /* 使用弹性盒子布局 */
			-webkit-box-orient: vertical; /* 垂直排列子元素 */
			overflow: hidden; /* 隐藏溢出的内容 */
			-webkit-line-clamp: 3; /* 显示的行数 */
			-webkit-box-orient: vertical; /* 垂直排列子元素 */
			text-overflow: ellipsis; /* 显示省略号 */
		}
		.btn {
			box-sizing: border-box;
			width: px(133);
			height: px(50);
		}
	}
	.financialItem:nth-child(4n) {
		margin-right: 0;
	}
	.el-dropdown-link {
		font-size: px(21);
		display: flex;
		align-items: center;
		padding: px(10) px(16);
		background: #ffffff;
		color: #02102e;
		margin-left: px(20);
		border-radius: 10.67px;
		border: px(1.3) solid #f1f2f4;
		box-shadow: px(5.3) px(5.3) px(16) 0px rgba(2, 16, 46, 0.08);
	}
	.found {
		width: 1280px;
		margin: 0 auto;

		.foundTop {
			margin-bottom: px(60);
			.foundRig {
				.sort {
					font-size: px(21);
					font-family: Manrope, Manrope-500;
					font-weight: 500;
					text-align: LEFT;
					color: #02102e;
				}
			}
			.foundLrft {
				font-size: px(37);
				font-family: Manrope, Manrope-700;
				font-weight: 700;
				text-align: LEFT;
				color: #02102e;
			}
		}
	}
	.more {
		font-size: px(21);
		font-family: Manrope, Manrope-700;
		font-weight: 700;
		text-align: center;
		// padding: px(21) px(42);
		width: px(138);
		height: px(70);
		line-height: px(70);
		color: #02102e;
		margin: 0 auto;
		margin-top: px(-50);
	}
	.topic {
		height: px(197);
		width: 1280px;
		margin: 0 auto;
		// background-color: pink;
		.topicItem {
			font-size: px(18);
			padding: px(15) px(20);
			font-family: Manrope, Manrope-500;
			font-weight: 500;
			text-align: LEFT;
			color: #02102e;
			margin-right: px(18);
			border: px(1.3) solid #f1f2f4;
			border-radius: px(10);
			box-shadow: px(5.3) px(5.3) px(16) 0px rgba(2, 16, 46, 0.08);
			.topImg {
				width: px(21);
				height: px(21);
				margin-left: px(10);
			}
		}
	}
	.tabsBotton {
		width: 100%;
		border-bottom: px(1.3) solid #dddee1;
		.tabs {
			width: 1280px;
			margin: 0 auto;
			height: px(85);
			.tabItem {
				font-size: px(20);
				font-family: Manrope, Manrope-700;
				font-weight: 700;
				text-align: LEFT;
				color: #02102e;
			}
			.moveImg {
				width: px(32);
				height: px(32);
			}
		}
	}
	.search {
		height: px(320);
		display: flex;
		align-items: end;
		.rigTab {
			.rigTitle {
				font-size: px(21);
				font-family: Manrope, Manrope-400;
				font-weight: 400;
				text-align: LEFT;
				color: #02102e;
				margin-right: px(15);
			}
			.tabsTit {
				font-size: px(18);
				font-family: Manrope, Manrope-500;
				font-weight: 500;
				text-align: center;
				color: #02102e;
				border-radius: px(10);
				border: px(1.3) solid #dddee1;
				padding: px(10) px(16);
				margin-right: px(15);
			}
		}
		.searchBot {
			height: px(200);
			width: 1280px;
			margin: 0 auto;
			// background-color: pink;
		}
	}
	.inpBox {
		.inp {
			width: px(680);
			height: px(60);
			border-bottom-left-radius: px(16);
			border-top-left-radius: px(16);
			border: px(1) solid #0d0d0e;
			padding-left: px(30);
			font-size: px(21);
			font-family: Manrope, Manrope-400;
			font-weight: 400;
			text-align: LEFT;
			color: #8590a1;
		}
		.inp::placeholder {
			font-size: px(21);
			font-family: Manrope, Manrope-400;
			font-weight: 400;
			text-align: LEFT;
			color: #8590a1;
		}
		.scheBtn {
			width: px(112);
			height: px(60);
			background: #02102e;
			border-bottom-right-radius: px(16);
			border-top-right-radius: px(16);
			.scheImg {
				width: px(28);
				height: px(28);
			}
		}
	}
	.btns {
		color: #ffffff !important;
		background: #c1c5cb !important;
	}
</style>
